@charset "UTF-8";
html {font-size: 14px;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
body, html {height: 100%;font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;}
::-webkit-scrollbar {width: 5px;height: 15px;}
::-webkit-scrollbar-thumb {border-radius: 5px;background: #555555;}
::-webkit-scrollbar-track {border-radius: 5px;background: #868e96}
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, input:-moz-placeholder {color: #d1d1d1;}
body {background: #f6f6f7;font-size: .9rem;}
*, *.focus {outline: 0}
a, .btn, a:visited, a:link { -webkit-transition: all .4s ease;-moz-transition: all .4s ease;-o-transition: all .4s ease;transition: all .4s ease;}
a {color: #333333; outline: 0;text-decoration: none;}
a:hover, a:focus, a:active, a.hover:hover {opacity: .9;text-decoration: none;color: #ff3366;box-shadow: none; }
a.hover:hover {color: #ff3366 !important;}
a:visited {color: unset; text-decoration: none !important;}
h1, h2, h3, h4, h5, h6 {line-height: 1.6;font-weight: 600;margin-bottom: 0;}
em {font-style: normal;}
li, ul, ol li, ul li {list-style: none;margin: 0;padding: 0;}
fieldset {border-top: 1px solid #eee;}
fieldset legend {margin-left: 40%;padding: 0 10px;font-size: .8rem;width: auto;}
:disabled, .disabled {cursor: not-allowed;}
.container.grid-lg {max-width: 960px;}
.container.grid-xl {max-width: 1140px;}
.btn:focus {box-shadow: none !important;}
.font-1 {font-size: .8rem}
.font-2 {font-size: .9rem}
.bg-1 {background-color: #c78590;}
.bg-2 {background-color: #f3bd7e;}
.bg-3 {background-color: #6ec4e9;}
.bg-4 {background-color: #66c9bb;}
.bg-5 {background-color: #9b9bd5;}
.text-muted {color: #a3afb7 !important;}
.text-normal {color: #333 !important;}
.empty {background: transparent; color: #333;}
.toast {position: fixed;left: 50%;top: 50%;background-color: rgba(0, 0, 0, .6);transform: translate(-50%, -50%);width: auto;border-radius: .2rem;border: none;min-width: 100px;text-align: center;z-index: 1000;}
.form-group:not(:last-child) {margin-bottom: 1.2rem;}
.form-input {border-color: #efefef;border-radius: .2rem;padding: .5rem;height: 2.5rem;}
.form-input:focus, .has-success .form-input, .has-success .form-input:focus {border-color: #27282d;color: #27282d;box-shadow: none;transition-duration: .5s}
.btn {color: #fff;border-radius: .3rem;height: auto !important;}
.btn.btn-lg {font-size: 1.2rem;padding: .5rem 1rem;color: #fff;}
.btn.btn-xl {font-size: 1.2rem;padding: 1rem;color: #fff;}
.btn-danger {color: #fff;background-color: #ff4c52;border-color: #ff4c52;}
.btn-danger.focus, .btn-danger.hover, .btn-danger:focus, .btn-danger:hover {color: #fff;background-color: #ff666b;border-color: #ff666b;box-shadow: none;}
.btn-dark {background: #526069; border-color: transparent; color: #fff;}
.btn-dark.focus, .btn-dark.hover, .btn-dark:focus, .btn-dark:hover {color: #fff;background-color: #76838f;border-color: #76838f;box-shadow: none;}
.btn.btn-danger.loading::after {border-bottom-color: #fff;border-left-color: #fff;}
.tile .tile-title {padding-bottom: 1rem;}
/* header */
.header {position: fixed; top: 0; width: 100%; z-index: 300; height: 4rem; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.08);background: #ffffff;}
.header .navbar-brand {height: 4rem;display: inline-block;}
.header .navbar-brand img {height: 4rem;width: auto;}
.nav {position: relative;flex-direction: row;margin: 0;}
.nav .nav-item a {padding: 0;}
.nav .nav-item .nav-link {display: block;padding: 0 1rem;margin: 0 .7rem;color: #777;}
.nav .nav-item a:focus, .nav .nav-item a:hover {color: #333;}
.nav-menu .nav-item .nav-link {border-bottom: .2rem solid transparent;font-size: 1rem;padding: 0 1rem;line-height: 3.8rem;font-weight: 600;}
.nav-menu .nav-item .nav-link:hover, .nav-menu .nav-item .nav-link:focus, .nav-menu .nav-item.active a, .nav-menu .nav-item.active a:hover {color: #ff3366; border-bottom: .2rem solid #ff3366;background: transparent;}
.nav-right .nav-item .nav-link {line-height: 2rem; height: 2rem;margin: 0;}
.nav-right .nav-item .nav-link img {height: 2rem; width: auto;border-radius: 100%;}
.nav-right .nav-item .nav-link i {font-size: 1.6rem; vertical-align: middle;}
.nav-right .nav-item .nav-link i.icon-mobile {font-size: 2rem;}
.nav-item-favorite .favorite-image {padding: 0 !important; margin-bottom: .8rem; display: block;}
.nav-item-favorite .panel .panel-body {max-height: 260px;overflow-y: auto;}
.nav-item-history .panel .panel-body {max-height: 200px;overflow-y: auto;}
.nav-item-history .tile {padding: .3rem 0; border-bottom: 1px dotted #efefef;}
.nav-item-history .tile .tile-content-2 {flex: 0 0 35%;}
.main {min-height: 360px;position: relative;padding: 5.5rem 0 1.5rem 0;}
.oauth {text-align: center;}
.oauth fieldset {margin-bottom: 1rem;}
.oauth a {padding: .45rem .7rem; border-radius: 100%;display: inline-block;color: #fff;margin-left: 1rem;}
.oauth-qq {background: #12b7f5;}
.oauth-weibo {background: #e6624b;}
.oauth-wechat {background: #51c332;}
.h4-title {padding-bottom: 1rem;}
.carousel {position: relative;overflow: hidden;padding: 7rem 0 3rem;}
.carousel .carousel-bg {position: absolute;left: 0;width: 100%;height: 100%;top: 0;background-size: cover;background-repeat: no-repeat;background-position: 50%;transition: background-image .1s ease 0s;}
.carousel .carousel-bg:after {position: absolute; width: 100%; left: 0; top: 0;background: rgba(0, 0, 0, .5);content: "";height: 100%;}
.carousel .carousel-body {position: relative; z-index: 33;}
.carousel .carousel-body .columns {margin: 0 -1rem;}
.carousel .carousel-body .columns:first-child {padding-bottom: 2rem;}
.carousel .carousel-body .column {padding: 0 1rem;}
.carousel .carousel-body img {transform: scale(1, 1);transition: all .6s ease-in-out;}
.carousel .carousel-body img:hover {transform: scale(1.1, 1.1);}
/* banner */
.panel {margin-bottom: 1.5rem;}
/* card */
.card {margin-bottom: 1rem;border: none;background: transparent;}
.card-image {height: 240px;object-fit: cover; overflow: hidden;}
.card-image img {transform: scale(1, 1);transition: all .6s ease-in-out;}
.card-image img:hover {transform: scale(1.2, 1.2);}
.card-title {padding: .4rem .5rem;text-align: center;}
.overlay {position: relative;-webkit-transform: translateZ(0);transform: translateZ(0);}
.overlay .overlay-panel {position: absolute;right: 0;bottom: 0;left: 0;padding: .2rem .4rem;color: #ffffff;background: rgba(0, 0, 0, .4);font-size: .8rem;}
/* filter */
.filter {background: #fff;border-top: 2px solid #ff3366;margin-bottom: 1.5rem; padding: .5rem;}
.filter .filter-item {padding: .5rem;}
.filter .filter-item label {padding: .1rem 0;}
.filter .filter-item a {padding: .1rem .4rem;margin: 0 0.1rem; color: #5f676f; font-size: .8rem;display: inline-block;}
.filter .filter-item a.active, .filter .filter-item a:hover {background: #ff3366; color: #ffffff; border-radius: 2px;text-decoration: none;}
/* book-overlay */
.book-overlay-container {padding: 20px 0 0 0;position: relative;}
.book-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 360px;background-size: cover;opacity: .6;}
/* book */
.panel {background: #fff; border: none; border-radius: .25rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);position: relative;}
.panel .panel-header {border-bottom: 1px solid rgba(0, 0, 0, .125);background: #fff; padding: .35rem 1.25rem;}
.panel .panel-header h4 {margin-bottom: 0;}
.panel .panel-footer {border-top: 1px solid rgba(0, 0, 0, .125);background: #fff; padding: .35rem;}
.panel .panel-body {overflow: unset;padding: 1.25rem;}
.book .tile-icon {margin-right: 1rem;}
.book .d-flex {align-items: center;-ms-flex-align: center;}
.book .book-view, .book .book-desc, .book .book-score {color: #868e96; font-size: .9rem; }
.book-tag a {margin-right: .4rem;}
.book .book-thumbnail {width: 220px;}
.book .book-desc {height: 140px;overflow: hidden;}
.book .label {padding: .2rem .4rem; border-radius: .2rem;font-size: .8rem;}
.book .book-score i, .book .book-score em {color: #ffb800;}
/* book item */
.book-item .book-item-btn {background: #efefef; color: #777; display: block; text-align: center; margin-bottom: .5rem;padding: .5rem 0;}
.book-item .book-item-btn:focus, .book-item .book-item-btn:hover {color: #111;}
.book-item .book-item-action {line-height: 2.2;}
.book-item .book-item-action a {font-size: .8rem; margin-right: .4rem;color: #a3afb7;}
.book-item .book-item-action a i {margin-right: .2rem;}
.book-content {padding-bottom: 4rem;}
.book-content img {margin: 0 auto .2rem;}
/*.book-item .book-item-list {height: 210px;overflow: hidden;}*/
.book-item .book-item-list.expand {height: auto;overflow: visible;}
.book-final {color: #777;}
/* comment */
.comment-form {padding-bottom: 1.5rem;}
.comment { border-top: 1px solid #eeeeee; padding-top: 1rem;}
.comment .date, .comment .reply {color: #b4b4b4; font-size: .8rem;}
/* pagination */
.pagination {justify-content: center;}
.pagination .page-item {padding: 0 .3rem;}
.pagination .page-item a {border-radius: .3rem;padding: .3rem .6rem; color: #333333;}
.pagination .page-item.active a, .pagination .page-item a:hover, .pagination .page-item a:focus {background: #ff3366;color: #fff;border-color: transparent;}
/* footer */
.footer {color: #5f676f;text-align: center;background: #2d3237;padding: 2rem 1.5rem;}
.footer a {color: #b4b6bd;}
.footer a:hover {color: #ffffff;}
.footer .copyright {padding: 1rem 0;font-family: open sans, helvetica neue, Helvetica, Arial, sans-serif;}
/* fixed */
.fixed {position: fixed; top: 45%; right: .5rem;}
.fixed a {color: #777;padding: .25rem .5rem; margin-bottom: .5rem; text-align: center;vertical-align: middle;display: block;background: #ddd;border-radius: 2px;}
.fixed a i {font-size: 1rem;}
.fixed a:hover {background: #ff3366; color: #f7f7f7; border-color: #ff3366;}
/* book-item-tool */
.book-item-tool {padding: 1rem;background: #fff;opacity: 0.9; position: fixed; bottom: 0; width: 100%;}
.book-item-tool .nav {justify-content: flex-end;}
.book-item-tool .nav-item .nav-link {margin-right: .5rem;}
.book-item-tool .nav-item .nav-link:hover i {color: #555;}
.book-item-tool .nav-item .nav-link i {font-size: 1.6rem;vertical-align: middle;color: #b0b0b0;}
.book-item-dialog {position: absolute;z-index: 6;bottom: 60px;right: 3rem;border-radius: 5px;width: 230px;border: 1px solid rgba(0, 0, 0, .125);}
.book-item-dialog .title {font-size: 1.2rem;margin-bottom: 0;background: #f3f2f0;color: #666;padding: .3rem .6rem;}
.book-item-dialog .list-group {max-height: 386px;overflow-y: auto;}
.book-item-dialog .list-group-item {padding: .35rem 1rem;background: #fdfdfd;border-bottom: 1px solid rgba(0, 0, 0, .125);border-top: 0;border-left: none; border-right: 0;}
.book-item-dialog .list-group-item:first-child {border-radius: 0;}
.book-item-dialog .list-group-item a {font-size: .9rem;color: #666;}
.book-item-dialog .list-group-item a:hover, .book-item-dialog .list-group-item a.active {color: #ff3366;}
.book-item-dialog .list-group::-webkit-scrollbar {width: 5px;height: 15px;}
.book-item-dialog .list-group::-webkit-scrollbar-thumb {border-radius: 5px;background: #555555;}
.book-item-dialog .list-group::-webkit-scrollbar-track {border-radius: 5px;background: #868e96}
/* dark */
.dark {background: #333333;transition: all .3s;}
.dark .header {background: #292929;}
.dark .header, .dark .header a {color: #bbbbbb;}
.dark .nav .nav-item a:focus, .dark .nav .nav-item a:hover {color: #efefef;}
.dark .book-item-tool {background: #292929;}
.dark .book-item-tool .nav-item .nav-link:hover i {color: #fff;}
.dark .book-item-dialog .list-group-item {background: #424243;}
.dark .book-item-dialog .title {background: #555;color: #bbbbbb;}
.dark .book-item-dialog .list-group-item a {color: #b0b0b0;}
.dark .book-item-dialog .list-group-item a:hover, .dark .book-item-dialog .list-group-item a.active {color: #ff620e;}
.dark .book-final {color: #b0b0b0;}
.search-dialog {position: fixed; background: #fff; top: 4rem; left: 0; z-index: 1111;width: 100%;padding: 5rem 0;height: 100%;display: none;}
.search-dialog .form-group {border-bottom: 1px solid #d1d1d1;margin-bottom: 1.5rem;}
.search-dialog .form-input {padding: .5rem; margin-bottom: .3rem; font-size: 1rem; border: none;background: transparent;}
.search-dialog h4 {margin-bottom: 1rem;}
.search-dialog .search-list a {padding: .5rem 1rem; background: #eaeaea; color: #888;display: inline-block;text-align: center;border-radius: .2rem;margin: 0 .8rem .8rem 0;transition: 1s;font-size: 1rem;}
.search-dialog .search-list a:hover {transform: scale(1.1);color: #333;}
.modal {padding: 0;}
.modal.active .modal-overlay {background-color: rgba(0, 0, 0, .6);}
.modal.modal-sm .modal-container {max-width: 380px;}
.modal-container {border-radius: .2rem;}
.modal-container .modal-body, .modal-container .modal-header {padding: 1.5rem;}
.modal-container .modal-header {padding-bottom: 0;}
.modal-container .modal-header .btn.btn-clear {font-size: 1.4rem;width: auto;margin: 0;}


